<template>
    <div class="pwd-container">
        <div class="header">
            <h1>修改管理员密码</h1>
        </div>
        <div class="pwd-box">
            <el-form :model="pwdForm" :rules="rules" ref="pwdForm" class="pwd-form" label-width="120px">
                <el-form-item label="旧密码" prop="oldPwd">
                    <el-input type="password" v-model="pwdForm.oldPwd" autocomplete="off" placeholder="请输入旧密码" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPwd">
                    <el-input type="password" v-model="pwdForm.newPwd" autocomplete="off" placeholder="请输入新密码" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="verifyPwd">
                    <el-input type="password" v-model="pwdForm.verifyPwd" autocomplete="off" placeholder="请再次输入密码" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="btn-box">
                        <div class="submit-btn">
                            <el-button type="primary" @click="submitForm('pwdForm')">确 定</el-button>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { validatePwdForElementUI, validateVerifyPwdForElementUI } from '@/utils'
import { globalApi } from '@/request'
import { Message } from 'element-ui'
import { mapMutations } from 'vuex'
import { SUCCESS_CODE } from "@/const";

export default {
    data() {
        const validateVerifyPwd = (rule, value, callback) => {
            validateVerifyPwdForElementUI(value, this.pwdForm.newPwd, callback);
        };
        return {
            pwdForm: {
                oldPwd: '',
                newPwd: '',
                verifyPwd: ''
            },
            rules: {
                oldPwd: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
                newPwd: [{ required: true, validator: validatePwdForElementUI, trigger: 'blur' }],
                verifyPwd: [{ required: true, validator: validateVerifyPwd, trigger: 'blur' }]
            }
        }
    },
    methods: {
        ...mapMutations(['setModifyPass']),
        submitForm(formName) {
            // 提交修改密码
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let data = {
                        oldPassword: this.pwdForm.oldPwd,
                        newPassword: this.pwdForm.newPwd
                    };
                    globalApi.password(data).then(res => {
                        if(res.code === SUCCESS_CODE){
                            Message.success("密码修改成功！");
                            // 清除localStorage和store中的值
                            window.localStorage.removeItem('lastModifyPass');
                            this.setModifyPass(false);
                            globalApi.logout().then(res => {
                                // 跳转至登录页
                                this.$router.push('/login');
                                Message.warning("管理员首次登陆后请在系统检测模块执行系统初始化操作");
                            }).catch(err => {
                                console.log(err);
                            });
                        }
                    }).catch(err => {
                        console.log(err);
                    });
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.pwd-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px 20px;
    .header {
        width: 100%;
        height: 63px;
        line-height: 63px;
        vertical-align: middle;
        text-align: center;
    }
    .pwd-box {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 400px;
        padding: 20px 15px;
        .pwd-form {
            height: 100%;
            padding-right: 0;
            .btn-box {
                position: relative;
                margin-left: -120px; // 抵消el-btn的margin-left
                .submit-btn {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
        
    }
}
</style>